<layout name="site" />
<style type="text/css">
  .container { max-width: 640px; margin-left: auto; margin-right: auto; }
  .activity-title { border-bottom: 1px solid #f60; padding: 5px; }
  .card { position: relative; text-align: center; }
  .card img { width: 100%; }
  .prize, #scratch { font-weight: bold; height: 30px; line-height: 30px; position: absolute; left: 5%; text-align: center; bottom: 5%; width: 120px; color:#fff; }
  .show-result { color:#f00; font-size:1.2em; margin-top:10px; }
  .show-button { display:none; float:right; }
  .content { background:#fef8b2; width:290px; margin:10px auto; padding:6px 0; border-radius:6px; box-shadow:0 2px 5px #555; color:#595959; }
  .content .title { width:114px; height:28px; line-height:28px; margin-left:-5px; background:url("__COMMON__/images/title-bg.png") no-repeat; text-align:center; color:#fff; font-size:1.5rem; }
  .content p { padding:0 15px; margin:5px 0; }
  .slide { display:none;}
</style>

<style type="text/css">
	#up_zzjs{height: 24px;line-height: 24px;overflow: hidden;text-align: center; }
	#up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;}
	/*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/
	#up_zzjs #up_li a{font-size:15px;font-family:'宋体';color:#FF0000;font-weight:bold;}
	a[target="_blank"]:after {
		content: "";
		display: inline-block;
		font-weight: normal;
		font-size: 1rem;
	}
</style>

<div class="container">
  
  <h3 class="activity-title">{$activity.name}</h3>
  
  <div id="card" class="card">
    <img src="__STYLE__/Activity/Scratch/scratch.jpg">
    <div id="prize" class="prize"></div>
    <div id="scratch"></div>
  </div>
  
  <div class="result clearfix pd5">
    <span id="show-result" class="show-result"></span>
    <a id="show-button" class="btn btn-orange show-button">直接显示结果</a>
  </div>

  <div id="up_zzjs">
	<div id="marqueebox">
		<div id="up_li">
		    <volist id="vo" name="activity.prizeRecord">
		    	<p><a href="#" target="_blank"><span>"{$vo['userName']}"喜中{$vo['prize']}等奖.</span></a></p>
		    </volist>
		</div>
	</div>
  </div>
  
  <section class="content">
    <h3 class="title">活动说明</h3>
    <p>{$activity.intro}</p>
  </section>
  
  <section class="content">
    <h3 class="title">奖项设置</h3>
    <volist name="activity.prize_config" id="vo">
    <p><span>{$vo.title}</span>&nbsp;&nbsp;共<b>{$vo.total}</b>名&nbsp;&nbsp;奖品为<b>{$vo.prizeName}</b></p>
    </volist>
  </section>
  
  <section class="content">
    <h3 class="title">活动时间</h3>
    <p>开始时间：{$activity.begin_time|date='Y-m-d H:i', ###}</p>
    <p>结束时间：{$activity.end_time|date='Y-m-d H:i', ###}</p>
  </section>
  
</div>

<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js" charset="utf-8"></script>
<script src="__STYLE__/Activity/Scratch/wScratchPad.min.js" charset="utf-8"></script>
<script src="__COMMON__/js/modal.js" charset="utf-8"></script>

<script type="text/javascript">

  function startmarquee(lh,speed,delay) {
		var p=false;
		var t;
		var o=document.getElementById("marqueebox");
		o.innerHTML+=o.innerHTML;
		o.style.marginTop=0;
		o.onmouseover=function(){p=true;}
		o.onmouseout=function(){p=false;}
		function start(){
			t=setInterval(scrolling,speed);
			if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
		}
		function scrolling(){
			if(parseInt(o.style.marginTop)%lh!=0){
				o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
			if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) 
				o.style.marginTop=0;
			}else{
				clearInterval(t);
				setTimeout(start,delay);
			}
		}
		setTimeout(start,delay);
  }
  
  startmarquee(24,20,1500);

  $(function() {
    var activityId = {$activity.id},
        sid = {$sid};
    var oPrize = $("#prize");
    var prize = "{$activity.activityRecord.prize}"*1,
        prizeCn = "{$activity.activityRecord.title}";
    
    // 判断是否中奖先
    if (  prize ) {
      $( "#show-result" ).html ( "恭喜您已经获得了" + prizeCn + "，请前去领奖！" );
    } else {
      scratch();
    };
    
    // 不能刮奖的点击直接显示结果
    $( "#show-button" ).click(function(){
      $( "#scratch" ).hide();
      getPrize();
    });
    
    // 刮奖准备及配置
    function scratch () {
      $( "#show-button" ).show();
      var scratchtimes = 0,  //控制何时显示刮奖结果
          pause = false;
      $( "#scratch" ).wScratchPad({
        width : 120,
        height : 30,
        color : "#999",
        scratchDown : function() {},
        scratchMove : function() {
          if ( scratchtimes === 30 ) {
            getPrize();
            pause = true;
          };
          scratchtimes++;
        }
      });
    }
    
    // ajax获取中奖结果
    function getPrize () {
      $.post( "__CONTROLLER__/savePost", { "id": activityId, "sid": sid }, function( data ) {
          if ( data.error ) {
        	  msg = data.error;
          } else if ( data.prize ) {
              msg = "恭喜您获得" + data.title + "快去领奖吧！"
        	  $("#prize").html ( prize );
          } else {
              msg = "很遗憾您没有中奖，祝您下次好运";
          };
          modal.alert({
              "title": "提示",
              "text": msg
          });
      });
    };
    
  }); 
</script>
